import React from 'react';
import { useTodo } from '../context/TodoContext';

function TodoDetails({ todoId, navigationContext }) {
  const { getTodoById, toggleTodo, deleteTodo } = useTodo();
  
  const todo = getTodoById(todoId);
  
  if (!todo) {
    return (
      <div>
        <h2 className="demo3-page-title">待办事项不存在</h2>
        <button 
          className="demo3-button back"
          onClick={() => navigationContext.navigate('/')}
        >
          返回首页
        </button>
      </div>
    );
  }
  
  const categoryLabels = {
    work: '工作',
    personal: '个人',
    shopping: '购物'
  };
  
  const handleDelete = () => {
    deleteTodo(todo.id);
    navigationContext.navigate('/');
  };
  
  const formatDate = (dateString) => {
    const date = new Date(dateString);
    return date.toLocaleString('zh-CN');
  };
  
  return (
    <div>
      <h2 className="demo3-page-title">待办事项详情</h2>
      
      <div className="demo3-todo-details">
        <h2>{todo.text}</h2>
        
        <div className="demo3-todo-details-info">
          <p><strong>状态:</strong> {todo.completed ? '已完成' : '未完成'}</p>
          <p><strong>分类:</strong> {categoryLabels[todo.category]}</p>
          <p><strong>创建时间:</strong> {formatDate(todo.createdAt)}</p>
        </div>
        
        <div className="demo3-todo-details-actions">
          <button 
            className="demo3-button"
            onClick={() => toggleTodo(todo.id)}
          >
            {todo.completed ? '标记为未完成' : '标记为已完成'}
          </button>
          <button 
            className="demo3-button delete"
            onClick={handleDelete}
          >
            删除
          </button>
          <button 
            className="demo3-button back"
            onClick={() => navigationContext.navigate(-1)}
          >
            返回
          </button>
        </div>
      </div>
    </div>
  );
}

export default TodoDetails; 